<template>
  <div class="Waterfall">
    <div class="waterfall-out">
      <div class="waterfall-inner" v-for="item in data" :key="item.unique_id">
        <div class="content" @click="toDetail(item)">
          <img :src="item.info.avatar_url" alt="头像" class="content-img" />
          <div class="van-multi-ellipsis--l2 content-title">
            {{ item.info.content }}
          </div>
          <div class="content-user">
            <div class="left">
              <img :src="item.info.avatar_url" alt="头像" class="user-img" />
              <div class="van-ellipsis user-name">
                {{ item.info.name }}
              </div>
            </div>
            <div class="right">
              <van-icon name="like-o" />
              <p class="read-count">{{ item.info.read_count }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-loading class="loading" color="#0094ff" vertical>加载中...</van-loading>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUnmount, ref, toRaw, onDeactivated, onActivated } from "vue";
import { heightDiff } from "@/tool/heightDiff";
import { get } from "@/tool/get";
import { useRouter } from "vue-router";
export default {
  name: "WaterfallFlow_",
  setup() {
    const data = ref([]);
    const router = useRouter();
    onMounted(() => {
      document.addEventListener("scroll", Scroll, true);
    });

    onBeforeMount(() => {
      get("/data/usersDynamic").then((res) => {
        // console.log(res.data.data);
        ObjToArr(res.data.data);
      });
    });

    onActivated(() => {
      document.addEventListener("scroll", Scroll, true);
    })

    onBeforeUnmount(() => {
      document.removeEventListener("scroll", Scroll, true);
    });

    onDeactivated(() => {
      document.removeEventListener("scroll", Scroll, true);
    })

    const toDetail = (item) => {
      let toRawData = toRaw(item.info)
      let tempData = {
        image_list: toRawData?.image_list || null,
        avatar_url: toRawData?.avatar_url || null,
        name: toRawData?.name || null,
        content: toRawData?.content || null,
        circle_name: toRawData?.circle_name || null
      }
      router.push({
        path: `/wechatMon/${item.find_id}`,
        name: "wechatMon",
        params: { id: item.find_id, data: JSON.stringify(tempData) },
      });
      // console.log(item);
    };
    const ObjToArr = async (arg) => {
      let arr = Object.keys(arg);
      data.value = data.value.concat(arr.map((i) => arg[i]));
      if (data.value.length < 6 && data.value.length / 2 !== 0) {
        await get("/data/usersDynamic").then((res) => {
          ObjToArr(res.data.data);
        });
      }
    };
    const Scroll = async () => {
      let Top = document.documentElement.scrollTop;
      let Height = document.documentElement.clientHeight;
      let sumHeight = document.documentElement.scrollHeight;
      let temp = await heightDiff(Top, Height, sumHeight, "/data/usersDynamic");
      if (temp) {
        ObjToArr(temp.data.data);
      }
    };
    return {
      ObjToArr,
      data,
      Scroll,
      toDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.Waterfall {
  background: #fff;
  padding-bottom: 50px;

  .waterfall-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;

    // column-count: 3;
    .waterfall-inner {
      width: 50%;

      .content {
        min-height: 200px;
        margin: 4px;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 3px 3px 3px #eee;
        border-radius: 10px;
        overflow: hidden;

        .content-img {
          width: 100%;
          border-radius: 10px 10px 0 0;
        }

        .content-title {
          line-height: 16px;
          margin: 10px;
          font-size: small;
        }

        .content-user {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 20px;
          line-height: 20px;
          margin: 5px auto;

          .left {
            display: flex;
            width: 50%;
            height: 100%;
            font-size: small;

            .user-img {
              width: 20px;
              height: 100%;
              border-radius: 50%;
              padding: 0 5px;
            }

            .user-name {
              line-height: 20px;
              width: 70px;
              overflow: hidden;
              font-size: x-small;
              margin: 0;
            }
          }

          .right {
            display: flex;
            justify-content: right;
            align-items: center;
            width: 50%;
            height: 100%;

            .read-count {
              padding: 0 5px;
              line-height: 12px;
              font-size: small;
              margin: 0;
            }
          }
        }
      }
    }
  }

  .loading {
    margin: 10px;
  }
}
</style>